<div class="form__wrapper">
  <div class="card" data-controller="accordion" id="accordion-title">
    <div class="card-divider">
      <button class="card-divider-button" data-open="true" data-controls="panel-title" type="button">
        <%= icon "arrow-right-s-line" %>
        <h2 class="card-title" id="title">
          <%= title %>
        </h2>
      </button>
    </div>

    <div id="panel-title" class="card-section">
      <div class="row column">
        <%= form.translated :text_field, :name, autofocus: true, aria: { label: :name } %>
      </div>
    </div>
  </div>
  <% if form.object.settings? %>
    <div class="card" data-controller="accordion" id="accordion-global_settings">
      <div class="card-divider">
        <button class="card-divider-button" data-open="true" data-controls="panel-global_settings" type="button">
          <%= icon "arrow-right-s-line" %>
          <h2 class="card-title" id="global_settings">
            <%= t ".global_settings" %>
          </h2>
        </button>
      </div>

      <div id="panel-global_settings" class="card-section">
        <fieldset class="global-settings">
          <div class="card-section">
            <%= form.fields_for :settings, form.object.settings do |settings_fields| %>
              <%= render partial: "decidim/admin/components/settings_fields",
                         locals: {
                           form: settings_fields,
                           manifest: form.object.manifest,
                           settings_name: :global,
                           tabs_prefix: "global-settings"
                         } %>
            <% end %>
          </div>
        </fieldset>
      </div>
    </div>
  <% end %>
  <% if current_participatory_space.has_steps? %>
    <div class="card" data-controller="accordion" id="accordion-step_settings">
      <div class="card-divider">
        <button class="card-divider-button" data-open="true" data-controls="panel-step_settings" type="button">
          <%= icon "arrow-right-s-line" %>
          <h2 class="card-title" id="step_settings">
            <%= t ".step_settings" %>
          </h2>
        </button>
      </div>

      <div id="panel-step_settings" class="card-section">
        <div class="row column">
          <fieldset>
            <div class="card-section">
              <% current_participatory_space.steps.each do |step| %>
                <fieldset class="step-settings-<%= step.id %>">
                  <legend><%= step.position + 1 %>. <%= translated_attribute step.title %></legend>
                  <% step_settings = form.object.step_settings[step.id.to_s] %>

                  <%= form.fields_for :step_settings, nil do |settings_fields| %>
                    <%= settings_fields.fields_for step.id.to_s, step_settings do |settings_fields| %>
                      <%= render partial: "decidim/admin/components/settings_fields",
                                 locals: {
                                   form: settings_fields,
                                   manifest: form.object.manifest,
                                   settings_name: :step,
                                   tabs_prefix: "step-#{step.id}-settings"
                                 } %>
                    <% end %>
                  <% end %>
                </fieldset>
              <% end %>
            </div>
          </fieldset>
        </div>
      </div>
    </div>
  <% elsif form.object.default_step_settings? %>
    <div class="card" data-controller="accordion" id="accordion-default_step_settings">
      <div class="card-divider">
        <button class="card-divider-button" data-open="true" data-controls="panel-default_step_settings" type="button">
          <%= icon "arrow-right-s-line" %>
          <h2 class="card-title" id="default_step_settings">
            <%= t ".default_step_settings" %>
          </h2>
        </button>
      </div>

      <div id="panel-default_step_settings" class="card-section">
        <div class="row column">
          <fieldset class="default-step-settings">
            <div class="card-section">
              <%= form.fields_for :default_step_settings, form.object.default_step_settings do |settings_fields| %>
                <%= render partial: "decidim/admin/components/settings_fields",
                           locals: {
                             form: settings_fields,
                             manifest: form.object.manifest,
                             settings_name: :step,
                             tabs_prefix: "default-step-settings"
                           } %>
              <% end %>
            </div>
          </fieldset>
        </div>
      </div>
    </div>
  <% end %>
</div>
